<template>
    <view>
        <view class="smart-page-head">
            <view class="snart-page-head-title">checkbox</view>
        </view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt"> 默认模式</view>
            <view>
                <checkbox-grop>
                    <label>
                        <checkbox value="cb1" checked="true">选中</checkbox>
                    </label>
                    <label>
                        <checkbox avlue="cb">未选中</checkbox>
                    </label>
                </checkbox-grop>
            </view>
            <view class="uni-titile uni-common-mt">不同颜色与尺寸的checkbox</view>
            <view>
                <checkbox-grop>
                    <label>
                        <checkbox value="cb1" checked="true" color="blue" style="transform: scale(0.7);">选中</checkbox>
                    </label>
                    <label>
                        <checkbox avlue="cb" color="orange" style="transform: scale(0.7);">未选中</checkbox>
                    </label>
                </checkbox-grop>
            </view>
        </view>
        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                推荐展示样式
                <text>\n使用uni-list布局</text>
            </view>
        </view>
        <view class="uni-list">
            <checkbox-group @change="checkboxChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value"></label>
                    <view>
                        <checkbox :value="item.value" :checked="item.checked"></checkbox>
                    </view>
                    <view>{{item.name}</view>
            </checkbox-group>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                title:'checkbox',
                items:[
                    {
                        value:'USA',
                        name:'美国'
                    },
                    {
                        value:'CHN',
                        name:'中国',
                        checked:"true"
                    },
                    {
                        value:'BRA',
                        name:'巴西'
                    },
                    {
                        value:'JPN',
                        name:'日本',
                    },
                    {
                        value:'ENG',
                        name:'英国'
                    },
                    {
                        value:'FRA',
                        name:'法国'
                    }
                ]
            }
        },
        methods:{
            checkboxChange(e){
                var items = this.items,
                    values = e,detail.value;
                for(var i = 0, lenI = items.langth; i < lenI; ++i){
                    const item = items[i]
                    if(values.indexOf(item.value) >=0){
                        this.@set(item, 'checked', true)
                    }else{
                        this.@set(item, 'checked', false)
                    }
                }
            }
        }  
    }
</script>